<template>
  <div class="select-container">
    <h2>选择彩票类型</h2>

    <div v-if="loading" class="loading-container">
      <el-loading-spinner></el-loading-spinner>
      <p>加载彩种数据中...</p>
    </div>

    <div v-else-if="lotteryTypes.length === 0" class="empty-state">
      <p>暂无可用的彩票类型</p>
    </div>

    <div v-else class="lottery-types">
      <div class="lottery-card" v-for="lottery in lotteryTypes" :key="lottery.code"
        @click="selectLottery(lottery.code)">
        <h3>{{ lottery.name }}</h3>
        <p>前区: {{ lottery?.front.count }}个号码 ({{ lottery?.front.min }}-{{ lottery?.front.max }})</p>
        <p v-if="lottery.back">后区: {{ lottery?.back?.count }}个号码 ({{ lottery?.back?.min }}-{{ lottery?.back?.max }})</p>
      </div>
    </div>

    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getAllTypes } from '@/api/api.js'
import { ElMessage } from 'element-plus'

const router = useRouter()
const lotteryTypes = ref([])
const loading = ref(true)

// 获取所有彩种类型
const fetchLotteryTypes = async () => {
  try {
    loading.value = true
    const response = await getAllTypes({})

    if (response.code === 20000) {
      lotteryTypes.value = response.data || []
    } else {
      ElMessage.error('获取彩种类型失败: ' + (response.msg || '未知错误'))
      lotteryTypes.value = []
    }
  } catch (error) {
    console.error('获取彩种类型出错:', error)
    ElMessage.error('获取彩种类型失败，请刷新页面重试')
    lotteryTypes.value = []
  } finally {
    loading.value = false
  }
}

// 页面加载时获取彩种列表
onMounted(() => {
  fetchLotteryTypes()
})

// 选择彩票类型并跳转
const selectLottery = (type) => {
  router.push(`/lottery/${type}`)
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('userInfo') // 改为移除userInfo，与之前的权限逻辑保持一致
  router.push('/')
}
</script>

<style scoped>
.select-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

.lottery-types {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.lottery-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  width: 250px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.lottery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: #42b983;
}

.lottery-card h3 {
  color: #42b983;
  margin-bottom: 1rem;
}

.logout-btn {
  display: block;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #cc0000;
}

.loading-container {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #999;
  font-size: 1.2rem;
}
</style>
